<div ng-controller="SidebarStateName">
  <span class="protractor-test-state-name-container">
    <span ng-if="editabilityService.isEditable()">
      <span ng-if="!stateNameEditorIsShown" ng-click="openStateNameEditor()" class="oppia-editable-section">
        <strong style="font-size: 1.2em;"><[stateName]></strong>
        <span ng-if="editabilityService.isEditable()" class="glyphicon glyphicon-pencil oppia-editor-edit-icon" title="Edit State Name"></span>
      </span>

      <span ng-if="stateNameEditorIsShown">
        <form class="form-horizontal" role="form" ng-submit="saveStateNameAndRefresh($parent.$parent.tmpStateName)">
          <input type="text" ng-model="$parent.$parent.tmpStateName" focus-on="stateNameEditorOpened" class="protractor-test-state-name-input">
          <button type="submit" class="btn btn-default btn-sm protractor-test-state-name-submit">Done</button>
        </form>
      </span>
    </span>

    <span ng-if="!editabilityService.isEditable()">
      <strong><[stateName]></strong>
    </span>
  </span>
</div>
